<template>
  <div style=" width: 97%; margin: auto;">
    <h3>支援和计划支援西藏昌都建设、参与和计划乡村振兴工作情况</h3>
    <el-row>
      <el-col :span="18">
        <span>
                   {{ year }}年度是否支援西藏昌都建设/是否计划{{ year }}年度支援西藏昌都建设
              </span>
        <el-radio-group style="margin-left: 20px;" v-model="isListXz" size="default">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="primary" @click="addListXz()" size="default">增加</el-button>
      </el-col>
    </el-row>
    <el-form :model="listXzForm" ref="listXzFormRef">
      <el-row v-show="isListXz == 1">
        <el-col :span="24" style="margin-top: 20px;">
          <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" size="default" :data="listXzForm"
                    border>
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="supportYear" label="开展年份" align="center" width="120">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].supportYear'" :rules="listFormRules.supportYear">
                  <el-select clearable  v-model="scope.row.supportYear" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="dict in yearOptions"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenProjectName" label="项目名称" align="center" width="200">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenProjectName'" :rules="listXzFormRules.thenProjectName">
                  <el-input v-model="scope.row.thenProjectName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenProjectExpenditure" label="项目支出（人民币）" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenProjectExpenditure'"
                              :rules="listXzFormRules.thenProjectExpenditure">
                  <el-input type="number" v-model="scope.row.thenProjectExpenditure" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenBenefitNum" label="受益建党立卡贫困户数" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenBenefitNum'" :rules="listXzFormRules.thenBenefitNum">
                  <el-input type="number" v-model="scope.row.thenBenefitNum" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenBenefitUserNum" label="受益建党立卡贫困人数" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenBenefitUserNum'"
                              :rules="listXzFormRules.thenBenefitUserNum">
                  <el-input type="number" v-model="scope.row.thenBenefitUserNum" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenProjectTypes" label="项目类别（多选）" align="center" width="250">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenProjectTypes'"
                              :rules="listXzFormRules.thenProjectTypes">
                  <el-select clearable  v-model="scope.row.thenProjectTypes" multiple placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="dict in XZProjectCategoryOptions"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenBenefitAddress" label="项目受益地点" align="center" width="200">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenBenefitAddress'"
                              :rules="listXzFormRules.thenBenefitAddress">
                  <el-input v-model="scope.row.thenBenefitAddress" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenProjectConcent" label="项目简述" align="center" width="200">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenProjectConcent'"
                              :rules="listXzFormRules.thenProjectConcent">
                  <el-input type="textarea" v-model="scope.row.thenProjectConcent" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="80">
              <template #default="scope">
                <el-button type="text" size="default" @click="listXzDetete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: 50px;">
      <el-col :span="18">
        <span>
                   {{ year }}年度是否参与乡村振兴工作/是否计划{{ nowYear }}年度参与有关工作
              </span>
        <el-radio-group style="margin-left: 20px;" v-model="isList" size="default">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="primary" @click="addList()" size="default">增加</el-button>
      </el-col>
    </el-row>

    <el-form :model="listForm" ref="listFormRef">
      <el-row v-show="isList == 1">
        <el-col :span="24" style="margin-top: 20px;">
          <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" size="default" :data="listForm"
                    border>
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="supportYear" label="开展年份" align="center" width="120">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].supportYear'" :rules="listFormRules.supportYear">
                  <el-select clearable  v-model="scope.row.supportYear" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="dict in yearOptions"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenProjectName" label="项目名称" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenProjectName'" :rules="listFormRules.thenProjectName">
                  <el-input v-model="scope.row.thenProjectName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenProjectExpenditure" label="项目支出（人民币）" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenProjectExpenditure'"
                              :rules="listFormRules.thenProjectExpenditure">
                  <el-input type="number" v-model="scope.row.thenProjectExpenditure" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenBenefitNum" label="受益建党立卡贫困户数" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenBenefitNum'" :rules="listFormRules.thenBenefitNum">
                  <el-input type="number" v-model="scope.row.thenBenefitNum" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenBenefitUserNum" label="受益建党立卡贫困人数" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenBenefitUserNum'"
                              :rules="listFormRules.thenBenefitUserNum">
                  <el-input type="number" v-model="scope.row.thenBenefitUserNum" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenProjectTypes" label="项目类别（多选）" align="center" width="250">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenProjectTypes'" :rules="listFormRules.thenProjectTypes">
                  <el-select clearable  v-model="scope.row.thenProjectTypes" multiple placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="dict in XCProjectCategoryOptions"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenBenefitAddress" label="项目受益地点" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenBenefitAddress'"
                              :rules="listFormRules.thenBenefitAddress">
                  <el-input v-model="scope.row.thenBenefitAddress" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenProjectConcent" label="项目简述" align="center"  width="200">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenProjectConcent'"
                              :rules="listFormRules.thenProjectConcent">
                  <el-input type="textarea" v-model="scope.row.thenProjectConcent" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="80">
              <template #default="scope">
                <el-button type="text" size="default" @click="listDetete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>
<script>
import { getDictByCode, getTableInfoByPage, stSaveActivities } from '@/views/yearCheck/ykb/st/st'

export default {
  data() {
    return {
      year: undefined,
      yearOptions:[{id: new Date().getFullYear(), name: new Date().getFullYear()}, {id: new Date().getFullYear() - 1, name: new Date().getFullYear() - 1}],
      XZProjectCategoryOptions: undefined,
      XCProjectCategoryOptions: undefined,
      nowYear: new Date().getFullYear(),
      sexOptions: [{ id: '1', name: '男' }, { id: '2', name: '女' }],
      shiOptions: [{ id: '1', name: '是' }, { id: '2', name: '否' }],
      isListXz: 2,
      xzPostForm: {
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        examineYear: localStorage.getItem('examineYear'),//备案年度
        garbageClassification: '',//垃圾分类情况
        id: '',//其它活动id
        organizationBaseId: '',//组织id
        otherConcent: '',//其它情况
        preventionControl: '',//风险防控情况
        projectType: '1',//项目类型 1-援藏 2-乡村振兴 3-成渝经济圈
        supportYear: new Date().getFullYear() - 1,//($date-time)支援年份
        thenBenefitAddress: '',//当年收益地点
        thenBenefitNum: '',//当年受益建档立卡贫困户户数
        thenBenefitUserNum: '',//当年受益建档立卡贫困户人数
        thenProjectConcent: '',//当年项目内容简述
        thenProjectExpenditure: '',//当年项目支出
        thenProjectName: '',//当年项目名称
        thenProjectTypes: []//当年项目类别
      },
      postForm: {
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        examineYear: localStorage.getItem('examineYear'),//备案年度
        garbageClassification: '',//垃圾分类情况
        id: '',//其它活动id
        organizationBaseId: '',//组织id
        otherConcent: '',//其它情况
        preventionControl: '',//风险防控情况
        projectType: '2',//项目类型 1-援藏 2-乡村振兴 3-成渝经济圈
        supportYear: new Date().getFullYear() - 1,//($date-time)支援年份
        thenBenefitAddress: '',//当年收益地点
        thenBenefitNum: '',//当年受益建档立卡贫困户户数
        thenBenefitUserNum: '',//当年受益建档立卡贫困户人数
        thenProjectConcent: '',//当年项目内容简述
        thenProjectExpenditure: '',//当年项目支出
        thenProjectName: '',//当年项目名称
        thenProjectTypes: []//当年项目类别
      },
      listXzForm: [],
      isList: 2,
      listForm: [],
      listXzFormRules: {
        supportYear: [{ required: true, message: '请选择', trigger: 'blur' }],
        thenProjectName: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenProjectExpenditure: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenBenefitNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenBenefitUserNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenBenefitAddress: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenProjectConcent: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenProjectTypes: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      listFormRules: {
        supportYear: [{ required: true, message: '请选择', trigger: 'blur' }],
        thenProjectName: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenProjectExpenditure: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenBenefitNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenBenefitUserNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenBenefitAddress: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenProjectConcent: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenProjectTypes: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  created() {

  },
  methods: {
    listXzDetete(index) {
      this.listXzForm.splice(index, 1)
    },
    listDetete(index) {
      this.listForm.splice(index, 1)
    },
    postInfo() {
      this.$refs.listXzFormRef.validate(valid => {
        if (valid) {
          if (this.listXzForm == null  || this.listXzForm.length == 0) {
            return
          }
          for (let i = 0; i < this.listXzForm.length; i++) {
            this.listXzForm[i].thenProjectTypes = JSON.stringify(this.listXzForm[i].thenProjectTypes)
            this.listXzForm[i].creditCode = localStorage.getItem('creditCode')
            this.listXzForm[i].examineYear = localStorage.getItem('examineYear')
          }
          stSaveActivities(this.listXzForm).then(response => {
            this.$message({
              message: '支援和计划支援西藏昌都建设保存成功',
              type: 'success'
            })
            this.getInfo()
          })
        } else {
          this.$message({
            message: '请填写完整',
            type: 'error'
          })
        }
      })
      this.$refs.listFormRef.validate(valid => {
        if (valid) {
          if (this.listForm == null  || this.listForm.length == 0) {
            return
          }
          for (let i = 0; i < this.listForm.length; i++) {
            this.listForm[i].thenProjectTypes = JSON.stringify(this.listForm[i].thenProjectTypes)
            this.listForm[i].creditCode = localStorage.getItem('creditCode')
            this.listForm[i].examineYear = localStorage.getItem('examineYear')
          }
          stSaveActivities(this.listForm).then(response => {
            this.$message({
              message: '参与和计划乡村振兴工作情况保存成功',
              type: 'success'
            })
            this.getInfo()
          })
        } else {
          this.$message({
            message: '请填写完整',
            type: 'error'
          })
        }
      })
    },
    getInfo() {
      this.year = localStorage.getItem('examineYear')
      this.yearOptions = [{
        id: new Date().getFullYear(),
        name: new Date().getFullYear()
      }, { id: new Date().getFullYear() - 1, name: new Date().getFullYear() - 1 }]
      getTableInfoByPage(16).then(response => {
        this.listXzForm = response.data.tibet
        if (this.listXzForm == null || this.listXzForm == '') {
          this.listXzForm = []
          this.isListXz = 2
        } else {
          this.isListXz = 1
        }
        for (let i = 0; i < this.listXzForm.length; i++) {
          this.listXzForm[i].projectType = '1'
          this.listXzForm[i].supportYear = this.listXzForm[i].supportYear
          if (this.listXzForm[i].thenProjectTypes == null || this.listXzForm[i].thenProjectTypes == '') {
            this.listXzForm[i].thenProjectTypes = []
          } else {
            this.listXzForm[i].thenProjectTypes = JSON.parse(this.listXzForm[i].thenProjectTypes)
          }
        }
        this.listForm = response.data.village
        if (this.listForm == null || this.listForm == '') {
          this.listForm = []
          this.isList = 2
        } else {
          this.isList = 1
        }
        for (let i = 0; i < this.listForm.length; i++) {
          this.listForm[i].projectType = '2'
          this.listForm[i].supportYear = this.listForm[i].supportYear
          if (this.listForm[i].thenProjectTypes == null || this.listForm[i].thenProjectTypes == '') {
            this.listForm[i].thenProjectTypes = []
          } else {
            this.listForm[i].thenProjectTypes = JSON.parse(this.listForm[i].thenProjectTypes)
          }
        }
        console.log(this.listXzForm)
      })
      getDictByCode('XCProjectCategory').then(response => {
        this.XCProjectCategoryOptions = response.data
      })
      getDictByCode('XZProjectCategory').then(response => {
        this.XZProjectCategoryOptions = response.data
      })
    },
    addListXz() {
      this.listXzForm.push({ ...this.xzPostForm })
      this.isListXz = 1
    },
    addList() {
      this.listForm.push({ ...this.postForm })
      this.isList = 1
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 4px; /* 单元格内边距 */
}

.el-form-item {
  margin-bottom: 0px;
}
</style>
